@small-size: 18px;
@normal-size: 20px;
@large-size: 24px;

@t: wdu-switch;

.wdu-switch {
    background: none;
    border: none;
    .wdu-center();

    &__label {
        margin: 0 5px;
        .wdu-text-normal();

        &-inactive {
            color: rgb(137, 137, 137);
        }

        &-active {
            color: #4262af
        }
    }

    &__main {
        display: inline-block;
        width: @normal-size * 2;
        height: @normal-size;
        overflow: hidden;
        border-radius: @normal-size;
        cursor: pointer;
        .inside-shadow-light();
        .wdu-border-light();
        .wdu-transition-quick();
    }

    &__wrapper {
        position: relative;
        left: -50%;
        width: 150%;
        height: 100%;
        padding: 2px;
        white-space: nowrap;
        box-sizing: border-box;
        .wdu-transition-quick();

        &::before {
            content: '';
            display: inline-block;
            width: calc(33.33% - 2px);
            height: 100%;
            background-clip: content-box;
            border-radius: 50%;
            position: relative;
            background-color: white;
            .out-shadow-normal();
        }
    }

    &__active {
        background-color: #9bc657;

        .wdu-switch__wrapper {
            left: 0;
            .inside-shadow-normal();
        }
    }

    &__disabled {
        color: grey;
        cursor: not-allowed;
        opacity: 0.7;

        .wdu-switch__block-trigger,
        .wdu-switch__wrapper {
            cursor: not-allowed;
        }

        .wdu-switch__active {
            background-color: grey;
        }
    }

    &__small {
        .@{t}__main {
            width: @small-size * 2;
            height: @small-size;
            border-radius: @small-size;
        }
    }

    &__normal {
        .@{t}__main {
            width: @normal-size * 2;
            height: @normal-size;
            border-radius: @normal-size;
        }
    }

    &__large {
        .@{t}__main {
            width: @large-size * 2;
            height: @large-size;
            border-radius: @large-size;
        }
    }
}
